<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.mc.lp.view.constants.*;"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<div ng-controller="UserAcademicController as uac" ng-init="uac.init(selectedStudentProfile,usc)">
	<section class="content">
		<div class="row">
			<div class="col-md-6 col-sm-12 col-xs-12">
				<!-- Overall Grid -->
				<div class="box box-primary" style="height: 50%;">
					<div class="box-header">
						<i class="fa  fa-table"></i>
						<h3 class="box-title">Overall Performance Grid</h3>
					</div>
					<div class="box-body" ng-show="showGrid" style="max-height: 75%; min-height: 75%; overflow: auto">
						<table class="table table-bordered table-responsive" style="font-size: 13px">
							<tbody>
								<tr>
									<th style="width: 2%">#</th>
									<th style="width: 15%">Subjects</th>
									<th style="width: 20%" ng-repeat="class in overallGrid.gradeList">{{class.key}} <a data-toggle="modal" data-target="#photoBox" ng-show="class.value.length>0"><i ng-click="initPhotoBox(class.value)" class="glyphicon glyphicon-camera" style="cursor: pointer"></i></a></th>
								</tr>
								<tr ng-repeat="subject in overallGrid.subjects">
									<td>{{$index+1}}</td>
									<td>{{subject.name}}</td>
									<td ng-repeat="result in subject.marksList">
										<div class="row" style="width: 90% !important">
											<div ng-repeat="mark in result.marks">
												<div class="col-md-6">
													<div style="padding: 5px">
														<span class="label" ng-class="{'label-success':(mark.marks>=75),'label-danger':(mark.marks<45),'label-warning':(mark.marks>=45 && mark.marks<60),'label-info':(mark.marks<75 && mark.marks>=60)}" contextmenu="Test">T{{$index+1}}-{{mark.marks}}%</span>
													</div>
												</div>
											</div>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="box-footer clearfix">
						<span>Page {{academicPageNumber+1}} of {{getTotalCount('GRID')}}</span>
						<ul class="pagination pagination-sm no-margin pull-right">
							<!-- <li><a href="#">«</a></li>-->
							<li><button ng-disabled="(academicPageNumber>=(getTotalCount('GRID')-1))" ng-click="previous('GRID')">Prev</button></li>
							<li><button ng-disabled="academicPageNumber<=0" ng-click="next('GRID')">Next</button></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- /.col -->

			<div class="col-md-6 col-sm-12 col-xs-12">
				<!-- Overall Graph -->
				<div class="box box-primary" style="height: 50%;">
					<div class="box-header">
						<i class="fa fa-bar-chart-o"></i>
						<div class="section">
							<div class="row">
								<div class="col-md-7 box-title">Overall Graph</div>
								<div class="col-md-3">
									<span class="pull-right"><small><a class="btn-primary" style="color: white !important" href="#" ng-click="userTabCntr.setTabAction(2,'<c:url value="/view/user/templates/student_advanced_graph" />')">Advanced Graph&nbsp; </a></small></span>
								</div>
							</div>
						</div>
					</div>
					<div class="box-body" style="max-height: 75%; min-height: 75%; overflow: auto">
						<div id="chart_div"></div>
					</div>
					<!-- /.box-body-->

					<div class="box-footer clearfix">
						<span>Page {{graphPageNumber+1}} of {{getTotalCount('GRAPH')}}</span>
						<ul class="pagination pagination-sm no-margin pull-right">
							<!-- <li><a href="#">«</a></li>-->
							<li><button ng-disabled="(graphPageNumber>=(getTotalCount('GRAPH')-1))" ng-click="previous('GRAPH')">Prev</button></li>
							<li><button ng-disabled="graphPageNumber<=0" ng-click="next('GRAPH')">Next</button></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- /.col -->
		</div>

		<div class="row">
			<div class="col-md-6 col-sm-12 col-xs-12">
				<div class="box box-primary" style="height: 50%;">
					<div class="box-header">
						<i class="fa  fa-star"></i>
						<h3 class="box-title">Strength/Weakness</h3>
					</div>
					<div class="box-body" ng-hide="showStrength">No data found.</div>
					<div class="box-body" ng-show="showStrength" style="max-height: 75%; min-height: 75%; overflow: auto">
						<table class="table table-responsive  table-bordered sm-font">
							<thead>
								<tr>
									<th>Grade</th>
									<th>Strength/Weakness</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="grade in strengthData.gradeList">
									<td><b>{{grade.key}}</b></td>
									<td>
										<table class="table table-bordered sm-font" ng-show="grade.value.strength && grade.value.strength.length>0">
											<thead>
												<tr class="alert-success">
													<th width="30%">Exam</th>
													<th>Remarks</th>
											</thead>
											<tbody>
												<tr ng-repeat="row in grade.value.strength">
													<td>{{row.key}}</td>
													<td>{{row.value}}</td>
												</tr>
											</tbody>
										</table>
										<br>
										<table class="table table-bordered sm-font" ng-show="grade.value.weakness && grade.value.weakness.length>0">
											<thead>
												<tr class="alert-danger">
													<th width="30%">Exam</th>
													<th>Remarks</th>
											</thead>
											<tbody>
												<tr ng-repeat="row in grade.value.weakness">
													<td>{{row.key}}</td>
													<td>{{row.value}}</td>
												</tr>
											</tbody>
										</table>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="box-footer clearfix" ng-hide="!showStrength">
						<span>Page {{strengthPageNumber+1}} of {{getTotalCount('STRENGTH')}}</span>
						<ul class="pagination pagination-sm no-margin pull-right">
							<li><button ng-disabled="(strengthPageNumber>=(getTotalCount('STRENGTH')-1))" ng-click="previous('STRENGTH')">Prev</button></li>
							<li><button ng-disabled="strengthPageNumber<=0" ng-click="next('STRENGTH')">Next</button></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col-md-6 col-sm-12 col-xs-12">
				<!-- Recommendations chart -->
				<div class="box box-primary" style="height: 50%">
					<div class="box-header">
						<i class="fa  fa-tachometer"></i>
						<h3 class="box-title">Recommendations-{{studentProfile.totalGradeInfo[recommendationPageNumber].value}}</h3>
					</div>
					<div class="box-body" style="max-height: 75%; min-height: 75%; overflow: auto">
						<div ng-show="!isRecommendationFound" class="message">No Recommendations found for this year.</div>
						<div class="message" ng-repeat="r in recommendations" ng-show="isRecommendationFound">
							<div class="bg-info">
								<div>
									<a class="name" href="#"><b>{{r.recommendationtitle}}</b></a>
								</div>
								<div>{{r.recommendationText}}</div>
							</div>
							<div class="clear-fix">&nbsp;</div>
						</div>
					</div>
					<div class="box-footer clearfix">
						<span>Page {{recommendationPageNumber+1}} of {{getTotalCount('RECOMMENDATION')}}</span>
						<ul class="pagination pagination-sm no-margin pull-right">
							<li><button ng-disabled="(recommendationPageNumber>=(getTotalCount('RECOMMENDATION')-1))" ng-click="previous('RECOMMENDATION')">Prev</button></li>
							<li><button ng-disabled="recommendationPageNumber<=0" ng-click="next('RECOMMENDATION')">Next</button></li>
						</ul>
					</div>
					<!-- /.box-body-->
				</div>
			</div>
		</div>
		<!-- /.row -->
	</section>
</div>